<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 40px;
            height: 40px;
            background: url(./img/pics.png) no-repeat left top pink;
            background-position: -123px -117px;
            margin: 50px;

            /* 放大1.5倍 */
            background-size: 300px 300px;
            background-position: -184.5px -175.5px;
            width: 60px;
            height: 60px;
            
        }
    </style>
</head>
<body>

    <!-- 
        图片整合的目的: 将多个小图片整合为一张大图片, 借助背景图定位,有选择的渲染某张小图片

        优点:
            (1) 减少请求的次数
            (2) 提高页面加载速度

        缺点: 
            在拼图时，比较麻烦，还有后期维护也比较麻烦，比如做好的图，然后一个图标改了大小，但是图标之间留的位置不够，那你就要重写很多css，当然现在已经很多这方面的软件，或者在线生成代码，但这个麻烦还是存在的。

        原理: 
            (1) 背景图依赖容器显示
            (2) 可以通过background-position调整背景图的位置 

        步骤:
            (1) 测量需要展示的背景图大小
            (2) 测量需要展示的背景图和整合大图片左上角的距离



     -->


    <!-- <img src="./img/1.png" alt="">
    <img src="./img/2.png" alt="">
    <img src="./img/3.png" alt="">
    <img src="./img/4.png" alt=""> -->
    <!-- <img src="./img/pics.png" alt=""> -->
    <div class="box"></div>
</body>
</html>